﻿@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <h4>Active <small> update sessions count</small></h4>
                <div id="updateSessions"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <h4>RAM <small>usage</small></h4>
                <div id="ramUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>Hard disk <small>activity</small></h4>
                <div id="diskUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>CPU <small>usage</small></h4>
                <div id="cpuUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>C: <small>drive free space</small></h4>
                <div id="diskSpaceUsage"></div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12">
                <h3>@Html.ActionLink("5", "Users", "Home") <small> users are currently logged in</small></h3>
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h4><a href="#">Events </a><small>only last 10 are shown</small> <span class="badge pull-right">42</span></h4>
                <ul class="list-group">
                    <li class="list-group-item"><span class="label label-default">10:00</span> A new XDS was registered</li>
                    <li class="list-group-item"><span class="label label-warning">09:52</span> Authentication failed for user 'admin'</li>
                    <li class="list-group-item"><span class="label label-default">09:42</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">09:30</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-danger">09:01</span> Failed to connect to DB Europe66</li>
                    <li class="list-group-item"><span class="label label-default">08:54</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">08:47</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">08:30</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">07:01</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-warning">06:52</span> Data cleanup job failed for network 'EU'</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/signalr")
    @Scripts.Render("~/bundles/highcharts")
    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        var diskUsageChart;
        var cpuUsageChart;
        var ramUsageChart;
        var diskSpaceUsageChart;
        var updateSessionsChart;

        $(document).ready(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: true
                }
            });
        });

        $(function () {

            diskUsageChart = new Highcharts.Chart({
                chart: {
                    height: 200,
                    type: 'gauge',
                    renderTo: 'diskUsage',
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
                },

                // the value axis
                yAxis: {
                    min: 0,
                    max: 100,

                    minorTickInterval: 'auto',
                    minorTickWidth: 1,
                    minorTickLength: 10,
                    minorTickPosition: 'inside',
                    minorTickColor: '#666',

                    tickPixelInterval: 30,
                    tickWidth: 2,
                    tickPosition: 'inside',
                    tickLength: 10,
                    tickColor: '#666',
                    labels: {
                        step: 2,
                        rotation: 'auto'
                    },
                    title: {
                        text: null
                    },
                    plotBands: [{
                        from: 0,
                        to: 75,
                        color: '#55BF3B' // green
                    }, {
                        from: 75,
                        to: 90,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 90,
                        to: 100,
                        color: '#DF5353' // red
                    }]
                },

                series: [{
                    name: 'Disk usage',
                    data: [0],
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            });

            cpuUsageChart = new Highcharts.Chart({
                chart: {
                    height: 200,
                    type: 'gauge',
                    renderTo: 'cpuUsage',
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
                },

                // the value axis
                yAxis: {
                    min: 0,
                    max: 100,

                    minorTickInterval: 'auto',
                    minorTickWidth: 1,
                    minorTickLength: 10,
                    minorTickPosition: 'inside',
                    minorTickColor: '#666',

                    tickPixelInterval: 30,
                    tickWidth: 2,
                    tickPosition: 'inside',
                    tickLength: 10,
                    tickColor: '#666',
                    labels: {
                        step: 2,
                        rotation: 'auto'
                    },
                    title: {
                        text: null
                    },
                    plotBands: [{
                        from: 0,
                        to: 75,
                        color: '#55BF3B' // green
                    }, {
                        from: 75,
                        to: 90,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 90,
                        to: 100,
                        color: '#DF5353' // red
                    }]
                },

                series: [{
                    name: 'CPU usage',
                    data: [0],
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            });

            ramUsageChart = new Highcharts.Chart({
                chart: {
                    height: 200,
                    renderTo: 'ramUsage',
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '<b>{point.y:.1f} MB</b>'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        }
                    }
                },

                series: [{
                    type: 'pie',
                    innerSize: '40%',
                    data: [['Free', 100.0], ['Used', 0.0]]
                }]
            });

            diskSpaceUsageChart = new Highcharts.Chart({
                chart: {
                    height: 200,
                    renderTo: 'diskSpaceUsage',
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '<b>{point.y:.1f} GB</b>'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        }
                    }
                },

                series: [{
                    type: 'pie',
                    innerSize: '40%',
                    data: [['Free', 100.0], ['Used', 0.0]]
                }]
            });

            // creates a proxy to the health check hub
            var hub = $.connection.mosaicHub;
            $.connection.hub.start();

            /*
            $.connection.hub.start().done(function () {
                alert("hub started");
            });
            */
            

            hub.client.updateHealthStatus = function (data) {
                var diskUsage = diskUsageChart.series[0].points[0];
                diskUsage.update(data.DiskUsage);

                var cpuUsage = cpuUsageChart.series[0].points[0];
                cpuUsage.update(data.CpuUsage);

                var ramData = [['Free', data.FreeRam], ['Used', data.UsedRam]];
                ramUsageChart.series[0].setData(ramData, true);

                var diskSpaceData = [['Free', data.FreeHDD], ['Used', data.UsedHDD]];
                diskSpaceUsageChart.series[0].setData(diskSpaceData, true);
            };
        });

        $(function () {

            updateSessionsChart = new Highcharts.Chart({
                chart: {
                    height: 300,
                    type: 'spline',
                    renderTo: 'updateSessions',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {

                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // current time
                                    y = parseInt(0 + Math.random() * 10);
                                series.addPoint([x, y], true, true);
                            }, 1000);
                        }
                    }
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: null
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },

                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                    }
                },

                legend: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                series: [{
                    name: 'Update sessions count',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                            time = (new Date()).getTime(),
                            i;

                        for (i = -19; i <= 0; i++) {
                            data.push({
                                x: time + i * 1000,
                                y: parseInt(0 + Math.random() * 10)
                            });
                        }
                        return data;
                    })()
                }]
            });
        });

    </script>


}


